// layouts/PublicSimpleLayout.js
import React, { useRef } from 'react';
import {
  Grid,
  CssBaseline,
  ThemeProvider,
  useMediaQuery,
  GlobalStyles,
} from '@mui/material';
import getTheme from 'themes/Theme';
import MobileDrawer from 'components/organisms/MobileDrawer';
import { SnackBar } from 'components/elements/SnackBar';
import { useDarkMode } from 'contexts/DarkMode';
import { useTvMode } from 'contexts/TvMode';
import { useDrawer } from 'contexts/DrawerContext';
import { useLocation } from 'react-router-dom';
import getNewTheme from 'themes/NewTheme';
import { AppBarProvider } from 'contexts/AppBarContext';
import VisualLogger from 'components/atoms/VisualLogger';
import BodyDiagonalImageSlice from 'components/electrons/BodyDiagonalImageSlice';
import backgroundImage from 'images/background.GIF';
import sliceImage from 'images/background.GIF';

const PublicSimpleLayout = ({ children }) => {
  const { darkMode } = useDarkMode();
  const { tvMode } = useTvMode();
  const { drawerOpen, toggleDrawer } = useDrawer();
  const isXs = useMediaQuery('(max-width:600px)');
  const location = useLocation();
  const isHomePage = location.pathname === '/';
  const isNotRoot = location.pathname !== '/';
  const isVisualLoggerPath = location.pathname === '/visual-logger';
  const isForSaleByOwnerPage = location.pathname === '/for-sale-by-owner';
  const logTargetRef = useRef(null);

  const theme = isHomePage
    ? getTheme(darkMode)
    : getTheme(darkMode, isXs);
  
  return (
    <AppBarProvider>
      <ThemeProvider theme={theme}>
        <SnackBar>
          <CssBaseline />
          <GlobalStyles 
            styles={{
              'html, body': {
                minHeight: '100vh',
                margin: 0,
                padding: 0,
              },
              body: {
                background: isHomePage
                  ? darkMode
                    ? '#000000'
                    : '#ffffff !important'
                  : darkMode
                    ? '#000000'
                    : '#ffffff !important',
              },
            }}
          />

          {isNotRoot && (
            <BodyDiagonalImageSlice
              backgroundImage={backgroundImage}
              sliceImage={sliceImage}
              thickness={550}
              hasBorder={true}
              borderColor={darkMode ? "#6200ea" : "#3f51b5"}
              hasInnerShadow={true}
              shadowColor={darkMode ? "rgba(0,0,0,0.8)" : "rgba(0,0,0,0.5)"}
              shadowIntensity={0}
              zoomFactor={2.5}
              shiftIntensity={7}
              duration={0.5}
              zIndex={-1}
              visible={isForSaleByOwnerPage}
              showSlice={false}
              backgroundCover={true}
            />
          )}
          
          <MobileDrawer
            anchor="left"
            open={drawerOpen}
            toggleDrawer={toggleDrawer}
          />

          <Grid 
            container 
            columns={12}
            ref={logTargetRef}
            sx={{ 
              width: '100%',
              margin: 0,
              padding: 0
            }}
          >
            {children}
          </Grid>

          {isVisualLoggerPath && (
            <VisualLogger
              targetRef={logTargetRef}
              position="top-right"
              title="Visual Logger Debug Info"
              showScrollY={true}
              showWindowHeight={true}
              showViewportCenter={true}
              showElementTop={true}
              showElementCenter={true}
              showDistanceFromCenter={true}
              showNormalizedDistance={true}
              showScale={true}
              showPosition={true}
              showTime={true}
              maxScale={1.5}
              minScale={1.0}
              styling={{
                backgroundColor: darkMode ? '#333' : '#f5f5f5',
                color: darkMode ? '#fff' : '#000',
                boxShadow: '0 4px 8px rgba(0,0,0,0.2)'
              }}
            />
          )}
        </SnackBar>
      </ThemeProvider>
    </AppBarProvider>
  );
};

export default PublicSimpleLayout;